<template>
	<view class="rest-details">
		<!-- 饭店详情（评价+查看位置） -->
		<view class="location">
			<!-- 查看位置 -->
			<uni-icons type="location-filled" size="18" color="#5a5a5a"></uni-icons>
			<text @click="jump">查看位置</text>
		</view>
		<view class="comment">
			<form @submit="commentSubmit">
				<view class="comment-form">
					<view class="grade-num-input">
						<text>评分</text>
						<view class="comment-grades" id="comment-grades">
							<view @click="changeStar(index)" class="comment-grade" v-for="(item, index) in 5" :key="index">
								<uni-icons type="star-filled" size="22" :color=starColor[index]></uni-icons>
							</view>
						</view>
					</view>
					<text>评价</text>
					<textarea class="comment-input" value="" v-model="myComment" placeholder="请输入您的评价" name="myComment" auto-height=true />
					<button form-type="submit" class="comment-btn">提交</button>
				</view>
			</form>
			<view class="all-comments">
				<text class="all-comments-title">所有评价</text>
				<view class="comments-list">
					<view class="comment-details" v-for="(item, index) in comments" :key="index">
						<view class="comment-top">
							<image class="comment-userPic" :src="item.userPic" mode=""></image>
							<text class="comment-username" >{{item.username}}</text>
							<view class="comment-grades">
								<view class="comment-grade" v-for="(item, index) in item.gradeNum" :key="index">
									<uni-icons type="star-filled" size="13" color="#F8621E"></uni-icons>
								</view>
								<text class="grade-num">{{item.gradeNum}}分</text>
							</view>
						</view>
						<p class="comment-content">{{item.content}}</p>
						<!-- <text class="comment-time">{{item.subTime}}</text> -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniIcons from "@/components/uni-icons/uni-icons.vue";
	import helper from "../../common/helper.js";
	export default {
		components: {
			uniIcons
		},
		data() {
			return {
				restid:"",
				myGrade: null,
				starColor: [
					'#ddd',
					'#ddd',
					'#ddd',
					'#ddd',
					'#ddd'
				],
				myComment: '',
				comments: [
					{
						userPic: 'https://tse1-mm.cn.bing.net/th/id/OET.bea114a76364457e88e4dbfaaf6bd393?w=272&h=272&c=7&rs=1&o=5&pid=1.9',
						username: 'hdd',
						gradeNum: 4,
						content: '好评！！！',
						subTime: '2020-5-19 18:18'
					}
				],
			}
		},
		onLoad(option) {
			this.restid=option.item;
			// console.log(option.item);
			console.log(this.restid)
			uni.request({
				url: 'https://gljh.utools.club/food/get_rest_comment',
				method: 'GET',
				data:{
					id:this.restid
				},
				success: res => {
					if (res.data != null) {
						console.log(res.data)
						this.comments = res.data.data;
					}
				}
			});
		},
		methods: {
			changeStar(index) {
				// this.myGrade = index;
				for (var i = 0; i < 5; i++) {
					this.starColor[i] = '#ddd';
				}
				for (var i = 0; i < index+1; i++) {
					this.starColor[i] = '#F8621E';
					this.$forceUpdate();
				}
				this.myGrade = index+1;
				console.log(this.myGrade);
				// for (var i = 0; i < 5; i++) {
				// 	console.log(this.starColor[i]);
				// }
			},
			commentSubmit(e) {
				console.log('comment发生了submit事件，携带数据为：评分：'+ this.myGrade + ', ' + JSON.stringify(e.detail.value))
				let resId = this.restid; // 用户输入的评价
				let myComment = this.myComment; // 用户输入的评价
				let score = this.myGrade; // 用户点的评分
				let userId = helper.mailaddress; // 用户唯一标识-email
				console.log('helper.mailaddress:',helper.mailaddress)
				uni.request({
					url:"https://gljh.utools.club/food/add_comment",
					data:{
						  comment: myComment,
						  resId: resId,
						  score: score,
						  userId: userId
					},
					method:"POST",
					success: (res) => {
						if(res.data.message==="success"){
							uni.showToast({
							    content: '提交成功'
							});
							console.log("提交成功!!!");
							// 提交成功后清空评分、评价
							for (var i = 0; i < 5; i++) {
								this.starColor[i] = '#ddd';
							}
							this.myGrade = 0;
							this.myComment = '';
						}
						console.log(res.data.message);
					}
				});
				// // 提交后清空评分、评价
				// for (var i = 0; i < 5; i++) {
				// 	this.starColor[i] = '#ddd';
				// }
				// this.myGrade = 0;
				// this.myComment = '';
				
				this.restid=option.item;
				// console.log(option.item);
				console.log(this.restid)
				uni.request({
					url: 'https://gljh.utools.club/food/get_rest_comment',
					method: 'GET',
					data:{
						id:this.restid
					},
					success: res => {
						if (res.data != null) {
							console.log(res.data)
							this.comments = res.data.data;
						}
					}
				});
			},
			
			
			jump(){
				uni.request({
					url:"https://gljh.utools.club/food/resturand_locate/"+this.restid,
					method:"POST",
					success: (res) => {
						console.log(res.data)
						uni.navigateTo({
							url:"../restLocation/restLocation?str="+res.data.data.name+"  联系电话:"+res.data.data.phone+"&lat="+res.data.data.latitude+"&long="+res.data.data.longitude
						})
					}
				})
			},
			
		}
	};
</script>

<style scoped lang="less">
	.rest-details {
		margin: 0;
		padding: 0;
		overflow-x: hidden;
		overflow-y: hidden;
		width: 100vw;
		height: 100vh;
		background-color: #F8F8F8;
		
		.location {
			box-sizing: border-box;
			width: 100%;
			padding: 3%;
			display: flex;
			flex-direction: row;
			margin-top: 25upx;
			background-color: white;
			font: normal 30upx/35upx "思源黑体";
			color: #5B5B5B;
		}
		.comment {
			box-sizing: border-box;
			width: 100%;
			padding: 3%;
			// background-color: #F8F8F8;

			.comment-form {
				width: 100%;
				height: auto;
				background-color: white;
				box-sizing: border-box;
				padding: 10upx;
				margin-bottom: 10upx;
				font: normal 35upx/50upx Arial, Helvetica, sans-serif;
				color: #555555;
				.grade-num-input {
					.comment-grades {
						display: flex;
						flex-direction: row;
						box-sizing: border-box;
						padding: 10upx;
						// float: right;
						font: normal 28upx/40upx Arial, Verdana, Sans-serif;
						color: #5B5B5B;
						.comment-grade {
							margin-right: 15upx;
						}
					}
				}
				.comment-input {
					font: normal 35upx/50upx Arial, Helvetica, sans-serif;
				}
				.comment-btn {
					width: 250upx;
					// float: right;
					margin-right: 0upx;
					background-color: white;
					color: #62C670;
				}
			}

			.all-comments {
				box-sizing: border-box;
				width: 100%;
				height: auto;
				padding: 3%;
				// border: 1px solid #eee;
				background-color: white;
				.all-comments-title {
					font: normal bold 34upx/60upx '思源黑体'; 
					color: #555555;
				}
				.comments-list {
					font: normal 30upx/30upx '思源黑体';
					width: 100%;
					.comment-details {
						border-top: 1px solid #eee;
						width: 100%;
						.comment-top {
							width: 100%;
							height: 100upx;
							display: flex;
							flex-direction: row;
							align-items: center;
							.comment-userPic {
								width: 80upx;
								height: 80upx;
								border-radius: 40upx;
							}
							.comment-username {
								font: normal 34upx/34upx '思源黑体';
								margin: 10upx;
							}
							.comment-grades {
								display: flex;
								flex-direction: row;
								box-sizing: border-box;
								padding: 10upx;
								// float: right;
								font: normal 28upx/40upx Arial, Verdana, Sans-serif;
								color: #5B5B5B;
								.comment-grade {
									margin-right: 5upx;
								}
							}
						}
						
						.comment-content {
							width: 100%;
							height: auto;
							box-sizing: border-box;
							padding: 10upx;
							font: normal 34upx/34upx '思源黑体';
						}
						.comment-time {
							font-size: 24upx;
							line-height: 50upx;
							color: #7F7F7F;
							padding: 10upx;
						}
					}
				}
			}
		}
	}
</style>
